<template>
	<view class="body" >
		<!-- 文物排行榜 -->
		<view class="relic-rank">
			<view class="relic-rank-title">
				<view class="">文物排行榜</view>
			</view>
			<view class="relic-first-box">
				<view class="relic-first" @click="gotoBigDetail(rankList[0])">
					<view class="relic-rank-img">
						<image :src="rankList[0].photo" mode="" class="img"></image>
					</view>
					<view class="relic-content">
						<view class="rank-text">第一名</view>
						<view class="relic-name">{{rankList[0].exhibitName}}</view>
						<view class="praise-counts">
							<text class="praise-title">点赞数：</text>
							<view class="praises">{{rankList[0].praises}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="relic-second-box">
				<view class="relic-second" @click="gotoBigDetail(rankList[1])">
					<view class="relic-rank-img">
						<image :src="rankList[1].photo" mode="" class="img"></image>
					</view>
					<view class="relic-content">
						<view class="rank-text">第二名</view>
						<view class="relic-name">{{rankList[1].exhibitName}}</view>
						<view class="praise-counts">
							<text class="praise-title">点赞数：</text>
							<view class="praises">{{rankList[1].praises}}</view>
						</view>
					</view>
				</view>
				<view class="relic-third" @click="gotoBigDetail(rankList[2])">
					<view class="relic-rank-img">
						<image :src="rankList[2].photo" mode="" class="img"></image>
					</view>
					<view class="relic-content">
						<view class="rank-text">第三名</view>
						<view class="relic-name">{{rankList[2].exhibitName}}</view>
						<view class="praise-counts">
							<text class="praise-title">点赞数：</text>
							<view class="praises">{{rankList[2].praises}}</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="mainTitle">
			<text class="title">藏品</text>
		</view>
		<view class="content">
			<view class="relicBody" :style="{backgroundColor: item.bgc, width: (screenWidth -40)/2 + 'px'}" 
			v-for="(item, i) in relicList" :key="i" @click="gotoDetail(item.relicType)">
			  <view class="title">
				<text>{{item.relicTitle}}</text>
			  </view>   
			  <view class="relicImg">  
				<image :src="item.relicMainImg" mode="heightFix" class="img"></image>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankList: [],
				relicList: [
					{
						relicTitle: '陶器',
						relicType: 'pottery',
						relicMainImg: 'http://8.138.83.48:9000/library/relic/pottery/pottery.png',
						bgc: '#CDC673',
					},
					{
						relicTitle: '瓷器',
						relicType: 'porcelain', 
						// relicMainImg: 'http://8.138.83.48:9000/library/porcelain4.jpeg',
						relicMainImg: 'http://8.138.83.48:9000/library/relic/porcelain/porcelain6.jpeg',
						bgc: '#f9cb9c',
					},
					{
						relicTitle: '铜器',
						relicType: 'bronze',
						// relicMainImg: 'http://8.138.83.48:9000/library/bronze1.jpeg',
						relicMainImg: 'http://8.138.83.48:9000/library/relic/bronze/bronze1.jpeg',
						bgc: '#B4EEB4'
					},
					{
						relicTitle: '其他',
						relicType: 'other',
						relicMainImg: 'http://8.138.83.48:9000/library/relic/other/other1.jpeg',
						bgc: '#4ea1f4',
					}
				],
				//设备信息
				sysInfo: 0 ,
				//设备高度
				screenHeight: 0,
				//设备屏幕宽度
				screenWidth: 0,
				
			};
		},
		methods: {
			//获取系统设备属性
			getPhoneAttribute() {
				const sysInfo = uni.getSystemInfoSync()
				this.sysInfo = sysInfo
				this.screenHeight = sysInfo.windowHeight
				this.screenWidth = sysInfo.windowWidth
			},
			//跳转到详情页	  
			gotoDetail(type) {
				uni.navigateTo({
					url: '/subpkg/relicDetail/relicDetail?type=' + type
				})
			},
			//设置文物排行榜列表
			async setRankList() {
				const {data: res} = await uni.$http.get('/exhibits/rankList')
				if(res.msg !== 'success') return uni.$showMsg('数据加载失败')
				// console.log(res)
				this.rankList = res.rankList
			},
			//跳转到大的文物详情页
			gotoBigDetail(relic) {
				uni.navigateTo({
					url: `/subpkg/relicBigDetail/relicBigDetail?detail=${JSON.stringify(relic)}`
				})
			},
		},
		onLoad() {
			this.getPhoneAttribute()
			this.setRankList()
		}
	}
</script>

<style lang="scss">

.body {
  /* height: 1000px; */
  // background-color: #e0e7c8;
  
  .relic-rank {
	  
	  .relic-rank-title {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  padding: 5px;
		  color: #C00000;
		  font-weight: bold;
		  font-size: 20px;
	  }
	  
	  .relic-rank-img {
		.img {
		  height: 100px;
		  width: 100px;
		  border-radius: 50px;
		}
	  }
	  .relic-content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 15px;
		.rank-text {
		  color: #C00000;
		}
		.relic-name {
		  font-weight: bold;
		}
		.praise-counts {
			margin: 2px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.praise-title {
				color: #666666;
				font-weight: bold;
			}
			.praises {
				color: #C00000;
				font-weight: bold;
			}
		}
	  }
	  .relic-first-box {
		  display: flex;
		  justify-content: center;
		  .relic-first {
			 display: flex;
			 justify-content: center;
			 flex-direction: column;
			 align-items: center;
			 padding: 10px;
			 background-color: gold;
			 margin-bottom: 20px;
			 border-radius: 8px;
		  }
	  }
	  .relic-second-box {
		  display: flex;
		  justify-content: space-around;
		  margin: 0 20px;
		  .relic-second {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			margin: 10px;
			background-color: silver;
			border-radius: 8px;
			.relic-rank-img {} 
			.relic-content {}
		  }
		  .relic-third {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			margin: 10px;
			background-color: #A67F37;
			border-radius: 8px;
			.relic-rank-img {}
			.relic-content {}
		  }
	  }
  }
	  
  .mainTitle {
	  margin-top: 20px;
	  display: flex;
	  justify-content: center;
	  .title{
	    font-size: 25px;
	    font-weight: bold;
	    text-shadow: 5px 1px 6px rgba(0, 0, 0, 0.459);
	  }
  }
  
  // 文物列表的主盒子
  .content {
	display: flex;
	// justify-content: space-between;
	// align-items: center;
	flex-wrap: wrap;
	margin: 5px;
	// border: 1px solid red;
	
	// 每件文物的样式
	.relicBody {
	  height: 180px;
	  // width: 170px; 不应该写死，(应该屏幕宽度-2*5)/2px
	  // width: 150px;
	  margin: 7px;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  // border: 1px solid blue;
	  // background-color: #a88108;
	  border-radius: 10%;
	  
	  .title {
		font-size: 25px;
		font-weight: bold;
		text-shadow: 5px 1px 6px rgba(0, 0, 0, 0.459);
		text-align: center;
		color: white;
		padding: 10px;
	  }
	  .relicImg {
		margin: 10px;
		.img {
			height: 100px;
			width: 150px;
		}
	  }
	  
	}
  }
}

</style>
